<script setup lang="ts">
import {showDialog} from 'vant';
import 'vant/es/dialog/style';

const props = defineProps<{
    count: number;
}>();

const handleClickGoods = () => {
    if (props.count <= 0) {
        showDialog({message: '抱歉，该物品已被借用完，请等待', confirmButtonText: '知道了'});
    }
};
</script>

<template>
    <div
        class="goods-item"
        @click="handleClickGoods"
    >
        <van-badge :content="count">
            <div
                class="img"
                :class="{active: props.count}"
            ></div>
        </van-badge>
        <slot name="name"></slot>
    </div>
    <!--    <van-badge :content="count"> </van-badge>-->
</template>

<style scoped lang="less">
.goods-item {
    width: 25%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 10px;
    font-size: 16px;

    .img {
        width: 80px;
        height: 80px;
        border-radius: 10px;
        background: rgb(184, 184, 184);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        margin-bottom: 5px;
    }

    .active {
        background: rgb(137, 175, 255);
    }
}
</style>
